import { useState } from 'react'
import {
  PickerView,
  type PickerValue,
} from '@/library/gallery/components/PickerView'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const basicColumns = [
  [
    { label: '周一', value: 'Mon' },
    { label: '周二', value: 'Tues' },
    { label: '周三', value: 'Wed' },
    { label: '周四', value: 'Thur' },
    { label: '周五', value: 'Fri' },
    { label: '周六', value: 'Sat' },
    { label: '周日', value: 'Sun' },
  ],
  [
    { label: '上午', value: 'am' },
    { label: '下午', value: 'pm' },
  ],
]

export default (): unknown => {
  const [value, setValue] = useState<PickerValue[]>(['Thur', 'am'])

  return (
    <>
      {/* <DemoBlock title="基础用法" padding="0">
        <PickerView
          columns={basicColumns}
          onChange={(v, e) => {console.log(v, e, '基础用法')}}
        />
      </DemoBlock> */}

      {/* <DemoBlock title="loading" padding="0">
        <PickerView
          loading
          columns={basicColumns}
        />
      </DemoBlock> */}

      {/* <DemoBlock title="通过鼠标滚轮进行选择" padding="0">
        <PickerView
          mouseWheel
          columns={basicColumns}
          onChange={(v, e) => {console.log(v, e, '通过鼠标滚轮进行选择')}}
        />
      </DemoBlock> */}

      {/* <DemoBlock title="自定义高度" padding="0">
        <PickerView
          columns={basicColumns}
          style={{ '--height': '500px', '--item-height': '2.8rem' }}
        />
      </DemoBlock> */}

      <DemoBlock title="受控模式" padding="0">
        <PickerView
          columns={basicColumns}
          value={value}
          initAnimate
          onChange={(val) => {
            // 建议使用. sync (value === innerValue) = true => async (value === innerValue) = true. 不会重新渲染
            setValue(val)
            // 不建议使用. sync (value === innerValue) = false => async (value === innerValue) = false. 会多渲染一次
            setValue([...val])
          }}
        />
      </DemoBlock>
    </>
  )
}
